import { html } from "htm/preact";

import Button from "../components/Button.component.js";

export default function TabSelector({
  tabs = [],
  disabled = [],
  selected = 0,
  onChangeTab,
}) {
  const selectTab = (tab) => {
    onChangeTab(tab);
  };

  const renderTabs = (selected) => {
    return tabs.map(
      (tab, index) =>
        html`<${Button}
          disabled=${disabled.includes(tab)}
          variant=${selected === index ? "" : "transparent"}
          key=${index}
          onClick=${() => {
            selectTab(index);
          }}
          >${tab}<//
        >`
    );
  };

  return html`
    <div class="tab-selector_container">${renderTabs(selected)}</div>
  `;
}
